<template>
    <div class="menuLink" :class="{notLink:!props.item.PATH.length}">
        <el-icon class="menu-icon" v-show="!props.item.PATH.length"><Connection /></el-icon>
        <span class="router-link" v-show="!props.item.PATH.length">{{ props.item.TITLE }}</span>
        <span class="router-link" 
            v-show="props.item.PATH.length"
            @click="clickLink(props.item.PATH, props.item)"
        >{{ props.item.TITLE }}</span>
    </div>
</template>

<script setup>
import { defineProps } from 'vue'
import { mainStore } from '@/stores/store'
import { useRouter } from 'vue-router'
// import {isCollectFunc} from '@/utils/isCollect'

const useStore = mainStore()
const router = useRouter()
// let isCollect = ref(false) //用户是否对其有进行收藏

//接收父组件传递的数据
const props = defineProps({
    item: {
        type: Object
    }
})

//点击链接打开页面
const clickLink = (path, item) => {
    // isCollect.value = isCollectFunc(path,useStore.userCollect)
    // useStore.setUcStatus(isCollect.value) 
    useStore.addSubTabList(item)
    useStore.toggleHomeShow(path)
    router.push(path)
}

</script>

<style lang="less" scoped>
.menuLink{
    height: 2.5rem;
    width: 100%;
    padding-left:.3125rem;
    display: flex;
    align-items: center;
    justify-content:flex-start;  
    background-color: rgba(68, 146, 224,.3);                      
    .menu-icon{
        width: 10%;
        color: #165bf0;
        // margin-right: .3125rem; 
        // padding-right:.3125rem;  ; 
        font-size: .875rem;                      
    }
    .router-link{
        width: 90%;
        font-size: .875rem;
        color: #165bf0;
        text-decoration: none;
        white-space:nowrap;   
    }
}
.menuLink:hover{
    background-color:rgba(95, 105, 116, 0.1) ;
    cursor: pointer;
}
.notLink:hover{
   cursor:default; 
}  
</style>